import React, { Component } from 'react'
import { getArticles, delArticles } from '../../requests/index'

import { Table, Divider, Tag, Modal, Card, Button, message } from 'antd';

import moment from 'moment';
import XLSX from 'xlsx'
 import { connect } from 'react-redux'
import {editactice} from '../../actions/edit' 

const { confirm } = Modal;




 class ArticleList extends Component {




  constructor(props) {
    super(props)


    this.state = {
      name: '文章列表',
      data: [

      ],
      columns: [
        {
          title: '作者',
          dataIndex: 'name',
          key: 'name',

        },
        {
          title: '点击量',
          dataIndex: 'amount',
          key: 'amount',
          render: (text, record) => {
            if (text > 500) {


              return <Tag color="cyan">{text}</Tag>
            } else {
              return <Tag color="magenta">{text}</Tag>
            }
          }
        },
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
          render: (text, record) => {
            return <a onClick={this.showDesc.bind(this, record)}>{text}</a>
          }
        },
        {
          title: '时间',
          key: 'creatAt',
          dataIndex: 'creatAt',
          render: (text) => {
            return moment(text).format('YYYY-MM-DD HH:mm');
          }

        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (


            <span>
              <a onClick={this.del.bind(this, record.Id)}>删除</a>
              <Divider type="vertical" />
              <a onClick={this.edit.bind(this, record)}> 编辑</a>
            </span>
          ),
        },
      ],
      isLoading: true,
      totle: '',
      pagesizes: 1,
      ModalText: '一但删除无法更改!',
      visible: false,
      confirmLoading: false,
      itemId:''
    }



  }


  componentDidMount() {
    getArticles({
      page: this.state.pagesizes
    })
      .then((res) => {

        console.log(res);
        const arr = []
        res.data.list.map((item, index) => {
          arr.push({
            key: index,
            name: item.author,
            amount: item.amount,
            title: item.title,
            creatAt: item.creatAt,
            Id: item.id



          })
        })
        this.setState({
          isLoading: false,
          totle: res.totle
        })
        this.setState({
          data: arr
        })

      })
  }
  showDesc = (record) => {


    this.props.history.push({
      pathname: `/admin/article/edit/${record.amount}`,
      query: record

    })


  };
  del = ((id) => {

    this.setState({
      visible:true,
      itemId:id,
      ModalText: '一但删除无法更改!',
    })





  })
  edit = ((record) => {
    this.props.history.push({
      pathname: `/admin/article/edit/${record.Id}`,
    

    })
this.props.editactice(record)
    
     //this.props.editactice(record)
  })
  onChange = ((page, pageSize) => {
    console.log(page);
    this.setState({
      pagesizes: page
    })

  })
  showModal = (() => {

    const _this = this

    confirm({
      title: '是否确定导出Excel表格?',
      content: '',

      onOk() {
        const data = []

        _this.state.data.map((item, index) => {
          data.push(Object.values(item))
        })
        const arr = []
        arr.push(['排序', '作者', '点击量', '标题', '时间'])
        data.map((item) => {

          item[4] = moment(item[4]).format('YYYY-MM-DD HH:mm');

          arr.push(item)

        })
        // console.log(arr);
        /* convert state to workbook */
        const ws = XLSX.utils.aoa_to_sheet(arr);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
        /* generate XLSX file and send to client */
        XLSX.writeFile(wb, `sheetjs${_this.state.pagesizes}.xlsx`)

      },
      onCancel() {
        message.warning('取消操作');
      },
    });


  })

  showModal = () => {
    this.setState({
      visible: true,
     
    });
  };

  handleOk = () => {
    this.setState({
      ModalText: '正在拼命删除中...',
      confirmLoading: true,
    });
    delArticles(this.state.itemId).then((res)=>{
        console.log(res);
        setTimeout(() => {
          if(res.code===200){
            this.setState({
              visible: false,
              confirmLoading: false,
            });
            message.success(res.data.msg);
          }

        }, 1000)
       
        
    })
   
  };

  handleCancel = () => {
    console.log('Clicked cancel button');
    this.setState({
      visible: false,
    });
  };
  render() {
    return (
      <>
        <Modal
          title="是否确定删除?"
          visible={this.state.visible}
          onOk={this.handleOk}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.handleCancel}
        >
          <p>{this.state.ModalText}</p>
        </Modal>

        <Card title="文章列表" extra={<Button onClick={this.showModal}>导出</Button>} >
          <Table columns={this.state.columns}
            dataSource={this.state.data}
            loading={this.state.isLoading}

            pagination={
              {
                pageSize: 20,
                total: this.state.total,
                onChange: this.onChange,

              }
            }

          />

        </Card>
      </>


    )
  }
}
const mapState = (state) => {
  
    
  return {
      isLading:state.Login.isLading,
      isLogin:state.Login.isLogin
  }

}
export default connect(mapState,{editactice})(ArticleList)
